.layout-builder {
  .layout {
    ::ng-deep {
      .container,
      .container-fluid {
        @apply p-0;
      }
    }

    .blocks {
      > .item {
        max-width: 100%;
        &:hover {
          z-index: 100;
        }
        &.item-divider,
        &.item-layout-builder {
          @apply w-full;
        }
        ::ng-deep {
          .component-toolbar {
            .actions {
              top: auto;
              bottom: 100%;
              border-radius: 4px 4px 0 0;
            }
          }
        }
        .block-toolbar {
          position: absolute;
          opacity: 0;
          white-space: nowrap;
          &[data-popper-placement] {
            opacity: 1;
          }
        }
      }
    }
    > .toolbar {
      @apply -right-[2px] -top-[2px];
    }
  }
}

:host-context(.builder-list) {
  .layout-builder {
    @apply pt-[30px];
    .layout {
      @apply p-0;
      &:hover {
        outline-offset: -2px;
        > .toolbar {
          display: block;
        }
      }
    }
  }
}
